<!DOCTYPE html>
<html>
<head>
  <title>transition/transform</title>
</head>
<style type="text/css">
  /* animation */
  .div7 {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s infinite;
    animation-direction:alternate;
    /* Safari and Chrome */
    -webkit-animation:myfirst 5s infinite;
    -webkit-animation-direction:alternate;
  }
  @keyframes myfirst{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
  }
  /*@-webkit-keyframes myfirst {!* Safari and Chrome *!*/
    /*0%   {background:red; left:0px; top:0px;}*/
    /*25%  {background:yellow; left:200px; top:0px;}*/
    /*50%  {background:blue; left:200px; top:200px;}*/
    /*75%  {background:green; left:0px; top:200px;}*/
    /*100% {background:red; left:0px; top:0px;}*/
  /*}*/

  /*　　@-moz-keyframes myfirst {!* Firefox *!*/
    /*　　　　 0%   {background:red; left:0px; top:0px;}*/
  /*25%  {background:yellow; left:200px; top:0px;}*/
  /*50%  {background:blue; left:200px; top:200px;}*/
  /*75%  {background:green; left:0px; top:200px;}*/
  /*100% {background:red; left:0px; top:0px;}*/
  /*　　}*/
  /*　　@-o-keyframes myfirst {!* Opera *!*/
    /*　　　　 0%   {background:red; left:0px; top:0px;}*/
  /*25%  {background:yellow; left:200px; top:0px;}*/
  /*50%  {background:blue; left:200px; top:200px;}*/
  /*75%  {background:green; left:0px; top:200px;}*/
  /*100% {background:red; left:0px; top:0px;}*/
  /*　　}*/
</style> <body> <div class="div7">animation</div> </body> </html>
